import 'package:flutter/material.dart';
import 'package:fsharing/core/models/bank.dart';
import 'package:fsharing/core/viewmodels/pages/mine/manage/withdraw_create_model.dart';
import 'package:fsharing/core/viewmodels/view_model.dart';
import 'package:fsharing/ui/widgets/background_container.dart';
import 'package:fsharing/ui/widgets/round_back_button.dart';
import 'package:oktoast/oktoast.dart';
import 'package:provider/provider.dart';

class WithdrawEditPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => WithdrawCreateModel(Provider.of(context, listen: false)),
      child: BackgroundContainer(
        child: Scaffold(
          appBar: AppBar(
            leading: RoundBackButton(),
            title: Text('创建店铺提现'),
          ),
          body: Column(
            children: <Widget>[
              Expanded(
                child: _ListWidget(),
              ),
              _BottomWidget(),
            ],
          ),
        ),
      ),
    );
  }
}

class _ListWidget extends StatelessWidget {
  const _ListWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    WithdrawCreateModel model = Provider.of(context);
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12),
      child: ListView(
        children: <Widget>[
          _ListHeaderWidget(),
          _ListSelectWidget(
            title: '选择提现店铺账户类型',
            value: model.account?.value ?? '',
            function: () => _onAccountClicked(context),
          ),
          _ListSelectWidget(
            title: '选择提现到账账户',
            value: model.bank?.bankCardId ?? '',
            function: () => _onBankClicked(context),
          ),
          _ListEditWidget(),
        ],
      ),
    );
  }

  void _onAccountClicked(BuildContext context) async {
    var result = await Navigator.of(context).pushNamed('/withdraw/account');
    if (result is MapEntry) {
      WithdrawCreateModel model = Provider.of(context, listen: false);
      model.account = result;
    }
  }

  void _onBankClicked(BuildContext context) async {
    var result = await Navigator.of(context).pushNamed('/bank', arguments: true);
    if (result is Bank) {
      WithdrawCreateModel model = Provider.of(context, listen: false);
      model.bank = result;
    }
  }
}

class _ListHeaderWidget extends StatelessWidget {
  const _ListHeaderWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 12),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/cart/img_store.png'),
          fit: BoxFit.fill,
        ),
      ),
      height: 45,
      child: Text(
        '提现信息填写',
        style: TextStyle(fontSize: 17),
      ),
    );
  }
}

class _ListSelectWidget extends StatelessWidget {
  final String title;
  final String value;
  final Function function;

  const _ListSelectWidget({
    Key key,
    @required this.title,
    @required this.value,
    @required this.function,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        color: Colors.white,
        height: 45,
        child: Column(
          children: <Widget>[
            Expanded(
              child: Row(
                children: <Widget>[
                  SizedBox(width: 12),
                  Expanded(
                    child: Text(
                      title,
                      style: TextStyle(color: Color(0xFF252525)),
                    ),
                  ),
                  Text(
                    value,
                    style: TextStyle(color: Color(0xFFAEAEAE), fontSize: 12),
                  ),
                  Icon(Icons.keyboard_arrow_right, color: Color(0xFFAEAEAE)),
                  SizedBox(width: 12),
                ],
              ),
            ),
            Divider(
              indent: 12,
              endIndent: 12,
              height: 1,
              color: Color(0xFFD6D6D6),
            )
          ],
        ),
      ),
      onTap: () => function(),
    );
  }
}

class _ListEditWidget extends StatelessWidget {
  const _ListEditWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(
          bottom: Radius.circular(10),
        ),
      ),
      height: 45,
      child: Row(
        children: <Widget>[
          SizedBox(width: 12),
          Text(
            '提现额度：',
            style: TextStyle(
              color: Color(0xFF252525),
            ),
          ),
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintText: '输入提现额度',
                hintStyle: TextStyle(color: Color(0xFFAEAEAE), fontSize: 14),
                border: InputBorder.none,
              ),
              style: TextStyle(color: Color(0xFFAEAEAE), fontSize: 14),
              keyboardType: TextInputType.number,
              onChanged: (value) => _onTextChanged(context, value),
            ),
          )
        ],
      ),
    );
  }

  void _onTextChanged(BuildContext context, String value) {
    WithdrawCreateModel model = Provider.of(context, listen: false);
    model.amount = value;
  }
}

class _BottomWidget extends StatelessWidget {
  const _BottomWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    WithdrawCreateModel model = Provider.of(context);
    return GestureDetector(
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/withdraw/img_button.png'),
            fit: BoxFit.fill,
          ),
        ),
        height: 43,
        margin: EdgeInsets.symmetric(vertical: 13, horizontal: 16),
        child: model.viewState == ViewState.busy
            ? SizedBox(
                width: 12,
                height: 12,
                child: CircularProgressIndicator(),
              )
            : Text(
                '提交',
                style: TextStyle(fontSize: 19),
              ),
      ),
      onTap: () => _onButtonClicked(context),
    );
  }

  void _onButtonClicked(BuildContext context) async {
    WithdrawCreateModel model = Provider.of(context, listen: false);
    ViewState viewState = await model.withdrawCreate();
    switch (viewState) {
      case ViewState.error:
        showToast(model.errorMessage);
        break;
      default:
        Navigator.of(context).pop(true);
        break;
    }
  }
}
